<template>
  <div class="app-container">
    <template v-if="isLoginPage">
      <!-- 登录页面 - 全屏显示 -->
      <router-view />
    </template>
    <template v-else>
      <!-- 主应用布局 - 若依风格 -->
      <div class="main-layout">
        <!-- 顶部导航栏 -->
        <div class="top-bar">
          <div class="top-bar-left">
            <button class="collapse-btn-top" @click="toggleSidebar" :title="isSidebarCollapsed ? '展开菜单' : '折叠菜单'">
              <el-icon>
                <component :is="isSidebarCollapsed ? 'DArrowRight' : 'DArrowLeft'" />
              </el-icon>
            </button>
            <div class="logo">
              <span class="logo-icon">🤖</span>
              <span class="logo-text">Agent Chat</span>
            </div>
          </div>
          <div class="top-bar-right">
            <ThemeToggle />
            <el-dropdown @command="handleUserCommand" trigger="click">
              <div class="user-menu">
                <el-icon class="user-icon"><User /></el-icon>
                <span class="user-label">用户</span>
                <el-icon class="dropdown-icon"><ArrowDown /></el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="logout">
                    <el-icon><SwitchButton /></el-icon>
                    <span>退出登录</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>

        <!-- 主内容区域 -->
        <div class="content-wrapper">
          <!-- 左侧菜单栏 -->
          <aside :class="['sidebar', { collapsed: isSidebarCollapsed }]">
            <nav class="nav-menu">
              <div
                v-for="item in mainMenuItems"
                :key="item.path"
                :class="['nav-item', { active: isActive(item.path) }]"
                @click="navigateTo(item.path)"
                :title="isSidebarCollapsed ? item.label : ''"
              >
                <el-icon class="nav-icon">
                  <component :is="item.icon" />
                </el-icon>
                <span v-if="!isSidebarCollapsed" class="nav-text">{{ item.label }}</span>
              </div>
            </nav>
          </aside>

          <!-- 右侧内容区域 -->
          <main class="main-content">
            <router-view />
          </main>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
import { useThemeStore } from './stores/theme'
import { useRouter, useRoute } from 'vue-router'
import { computed, onMounted, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import ThemeToggle from '@/components/ThemeToggle.vue'
import { MessageBox, User, MapLocation, ArrowDown, SwitchButton, DArrowLeft, DArrowRight, DocumentCopy, Calendar, Setting, Cpu, Tools } from '@element-plus/icons-vue'
import { logout } from '@/api/login'
import { removeToken, removeUserId } from '@/utils/auth'

const router = useRouter()
const route = useRoute()
const themeStore = useThemeStore()

// 侧边栏折叠状态
const storedCollapseState = localStorage.getItem('sidebarCollapsed')
const isSidebarCollapsed = ref(
  storedCollapseState === null ? true : storedCollapseState === 'true'
)

// 检查是否为登录页面
const isLoginPage = computed(() => {
  return route.name === 'Login'
})

// 主菜单项配置
const mainMenuItems = [
  {
    path: '/',
    label: '聊天对话',
    icon: 'MessageBox'
  },
  {
    path: '/map',
    label: '地图查看',
    icon: 'MapLocation'
  },
  {
    path: '/knowledge-base',
    label: '知识库管理',
    icon: 'DocumentCopy'
  },
  {
    path: '/agent-config',
    label: 'Agent配置',
    icon: 'Setting'
  },
  {
    path: '/model-config',
    label: '模型配置',
    icon: 'Cpu'
  },
  {
    path: '/tool-config',
    label: '工具管理',
    icon: 'Tools'
  },
  {
    path: '/development-plan',
    label: '开发计划',
    icon: 'Calendar'
  }
]

// 检查菜单项是否为当前活跃状态
const isActive = (path) => {
  return route.path === path
}

// 导航到指定页面
const navigateTo = (path) => {
  if (route.path !== path) {
    router.push(path)
  }
}

// 切换侧边栏折叠状态
const toggleSidebar = () => {
  isSidebarCollapsed.value = !isSidebarCollapsed.value
  localStorage.setItem('sidebarCollapsed', isSidebarCollapsed.value.toString())
}

// 处理用户菜单命令
const handleUserCommand = (command) => {
  if (command === 'logout') {
    handleLogout()
  }
}

// 退出登录
const handleLogout = () => {
  ElMessageBox.confirm(
    '确定要退出登录吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    // 调用退出登录接口
    logout().then(() => {
      // 清除 token 和用户信息
      removeToken()
      removeUserId()
      ElMessage.success('退出登录成功')
      // 跳转到登录页
      router.push('/login')
    }).catch(() => {
      // 即使接口调用失败，也清除本地 token 并跳转
      removeToken()
      removeUserId()
      router.push('/login')
    })
  }).catch(() => {
    // 用户取消操作
  })
}

// 确保在组件挂载时应用正确的主题
onMounted(() => {
  // 主题已在 store 中初始化
})
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.app-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f5f7fa;
}

html.dark .app-container {
  background: #0a0a0a;
}

/* 主布局 */
.main-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

/* 顶部导航栏 */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 0 30px;
  background: white;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  z-index: 100;
}

html.dark .top-bar {
  background: #1a1a1a;
  border-bottom-color: #333;
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  cursor: pointer;
  transition: all 0.3s ease;
}

html.dark .logo {
  color: #e4e4e7;
}

.logo:hover {
  transform: translateY(-2px);
}

.logo-icon {
  font-size: 28px;
}

.logo-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #f5f7fa;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  color: #6b7280;
  user-select: none;
}

.user-menu:hover {
  background: #e5e7eb;
  color: #1f2937;
}

html.dark .user-menu {
  background: #2a2a2a;
  color: #a1a5b0;
}

html.dark .user-menu:hover {
  background: #3a3a3a;
  color: #e4e4e7;
}

.user-icon {
  font-size: 18px;
  color: #667eea;
}

html.dark .user-icon {
  color: #818cf8;
}

.user-label {
  font-weight: 500;
}

.dropdown-icon {
  font-size: 12px;
  color: #9ca3af;
  transition: transform 0.3s ease;
}

html.dark .dropdown-icon {
  color: #64748b;
}

/* 内容包装器 */
.content-wrapper {
  display: flex;
  flex: 1;
  overflow: hidden;
  gap: 0;
}

/* 左侧菜单栏 */
.sidebar {
  width: 220px;
  background: white;
  border-right: 1px solid #e5e7eb;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.02);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.sidebar.collapsed {
  width: 70px;
}

html.dark .sidebar {
  background: #1a1a1a;
  border-right-color: #333;
}

/* 顶部折叠按钮 */
.collapse-btn-top {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #6b7280;
  font-size: 20px;
  padding: 0;
  flex-shrink: 0;
}

.collapse-btn-top:hover {
  background: #f3f4f6;
  color: #667eea;
}

html.dark .collapse-btn-top {
  color: #a1a5b0;
}

html.dark .collapse-btn-top:hover {
  background: #2a2a2a;
  color: #818cf8;
}

.nav-menu {
  padding: 16px 0;
  flex: 1;
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 14px 20px;
  cursor: pointer;
  color: #6b7280;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  margin: 4px 8px;
  border-radius: 6px;
  user-select: none;
  white-space: nowrap;
}

.sidebar.collapsed .nav-item {
  padding: 12px 8px;
  justify-content: center;
  gap: 0;
  margin: 4px 4px;
}

.nav-item:hover {
  background: #f3f4f6;
  color: #667eea;
  transform: translateX(4px);
}

.sidebar.collapsed .nav-item:hover {
  transform: scale(1.1);
  background: rgba(102, 126, 234, 0.1);
}

html.dark .nav-item {
  color: #a1a5b0;
}

html.dark .nav-item:hover {
  background: rgba(129, 140, 248, 0.1);
  color: #818cf8;
}

html.dark .sidebar.collapsed .nav-item:hover {
  transform: scale(1.1);
  background: rgba(129, 140, 248, 0.15);
}

.nav-item.active {
  background: linear-gradient(90deg, #667eea 0%, #667eea 3px, rgba(102, 126, 234, 0.1) 100%);
  color: #667eea;
  font-weight: 500;
  box-shadow: 2px 0 0 #667eea inset;
}

.sidebar.collapsed .nav-item.active {
  background: rgba(102, 126, 234, 0.15);
  box-shadow: 2px 0 0 #667eea inset;
}

html.dark .nav-item.active {
  background: linear-gradient(90deg, #818cf8 0%, #818cf8 3px, rgba(129, 140, 248, 0.15) 100%);
  color: #818cf8;
  box-shadow: 2px 0 0 #818cf8 inset;
}

html.dark .sidebar.collapsed .nav-item.active {
  background: rgba(129, 140, 248, 0.2);
  box-shadow: 2px 0 0 #818cf8 inset;
}

.nav-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.nav-text {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.3s ease;
}

.sidebar.collapsed .nav-text {
  display: none;
}

/* 右侧主内容区域 */
.main-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
  transition: background 0.3s;
}

::-webkit-scrollbar-thumb:hover {
  background: #999;
}

html.dark ::-webkit-scrollbar-thumb {
  background: #555;
}

html.dark ::-webkit-scrollbar-thumb:hover {
  background: #777;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .sidebar {
    width: 200px;
  }

  .logo-text {
    display: none;
  }

  .logo {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .top-bar {
    padding: 0 15px;
  }

  .sidebar {
    width: 60px;
  }

  .nav-text {
    display: none;
  }

  .nav-item {
    justify-content: center;
    padding: 12px;
    margin: 4px 4px;
  }

  .nav-icon {
    font-size: 24px;
  }
}

/* 滚动条美化 */
.sidebar::-webkit-scrollbar {
  width: 6px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

html.dark .sidebar::-webkit-scrollbar-thumb {
  background: #555;
}

html.dark .sidebar::-webkit-scrollbar-thumb:hover {
  background: #777;
}
</style>


